<template>
  <a-grid :cols="24" :row-gap="16" class="panel">
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="系统总人数"
          :value="userNum"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit">个</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="系统公告数"
          :value="announcementNum"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit">个</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="系统文件数"
          :value="fileInfoNum"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit">个</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item
      class="panel-col"
      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
      style="border-right: none"
    >
      <a-space>
        <a-avatar :size="54" class="col-avatar">
          <img
            alt="avatar"
            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
          />
        </a-avatar>
        <a-statistic
          title="**数"
          :value="otherNum"
          :value-from="0"
          animation
          show-group-separator
        >
          <template #suffix>
            <span class="unit">个</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { dayNewlyAddedUserUsingPost } from '@/service/backend/userController.ts';
import { Message } from '@arco-design/web-vue';
import { dayNewlyAddedAnnouncementUsingPost } from '@/service/backend/announcementController.ts';
import { dayNewlyAddedFileUsingPost } from '@/service/backend/fileInfoController.ts';

const userNum = ref(0);
const announcementNum = ref(0);
const fileInfoNum = ref(0);
const otherNum = ref(0);

/**
 * 加载 user 统计
 */
const loadUserNum = async () => {
  try {
    const { data, code } = await dayNewlyAddedUserUsingPost({});
    if (code === 0 && data) {
      const count = data.reduce((accumulator, item) => {
        return accumulator + Number(item?.num ?? 0);
      }, 0);
      userNum.value = count;
    }
  } catch (e) {
    Message.error(e.message);
  }
};

/**
 * 加载 announcement 统计
 */
const loadAnnouncementNum = async () => {
  try {
    const { data, code } = await dayNewlyAddedAnnouncementUsingPost({});
    if (code === 0 && data) {
      const count = data.reduce((accumulator, item) => {
        return accumulator + Number(item?.num ?? 0);
      }, 0);
      announcementNum.value = count;
    }
  } catch (e) {
    Message.error(e.message);
  }
};

/**
 * 加载 fileInfo 统计
 */
const loadFileInfoNum = async () => {
  try {
    const { data, code } = await dayNewlyAddedFileUsingPost({});
    if (code === 0 && data) {
      const count = data.reduce((accumulator, item) => {
        return accumulator + Number(item?.num ?? 0);
      }, 0);
      fileInfoNum.value = count;
    }
  } catch (e) {
    Message.error(e.message);
  }
};

/**
 * 加载 other 统计
 */
const loadOtherNum = async () => {
  try {
    const { data, code } = await dayNewlyAddedUserUsingPost({});
    if (code === 0 && data) {
      const count = data.reduce((accumulator, item) => {
        return accumulator + Number(item?.num ?? 0);
      }, 0);
      otherNum.value = count;
    }
  } catch (e) {
    Message.error(e.message);
  }
};

//加载统计信息
onMounted(async () => {
  await loadUserNum();
  await loadAnnouncementNum();
  await loadFileInfoNum();
  await loadOtherNum();
});
</script>

<style lang="less" scoped>
.arco-grid.panel {
  padding: 16px 20px 0;
  margin-bottom: 0;
}

.panel-col {
  padding-left: 43px;
  border-right: 1px solid rgb(var(--gray-2));
}

.col-avatar {
  margin-right: 12px;
  background-color: var(--color-fill-2);
}

.up-icon {
  color: rgb(var(--red-6));
}

.unit {
  margin-left: 8px;
  font-size: 12px;
  color: rgb(var(--gray-8));
}

:deep(.panel-border) {
  margin: 4px 0 0;
}
</style>
